<template>
	<view class="bg-white rounded-lg p-20">
		<view class="flex">
			<view class="flex flex-col items-center relative">
				<view @click="onPath('/pages/user/userinfo')" class="w-120 h-120 rounded-lg overflow-hidden">
					<ImageBoxVue :src="val.headimg"></ImageBoxVue>
				</view>
				<!-- <view
					class="absolute -bottom-20 flex items-center justify-center bg-gradient-to-b from-[#94F2FF] to-[#34D3DD] rounded-full w-88 h-44">
					<ImageBoxVue src="/static/icons/voice.png" width="28rpx" height="28rpx"></ImageBoxVue>
					<text class="text-white ml-4">{{val.voiceLength}}’</text>
				</view> -->
			</view>
			<view class="flex-1 pl-20 flex flex-col justify-center">
				<view class="flex justify-between mb-10">
					<view class="flex items-center">
						<view class="w-100 overflow-hidden ellipsis">
							<text class="text-md ellipsis">{{val.nickname}}</text>
						</view>
						<view class="mx-10">
							<view class="flex justify-center items-center" v-if="val.gender==0">
								<view class="rounded-full w-48 h-36 bg-[#FD6CFF] flex items-center justify-center">
									<ImageBoxVue src="/static/icons/w_man.png" width="24rpx" height="24rpx">
									</ImageBoxVue>
								</view>
							</view>
							<view class="flex justify-center items-center" v-if="val.gender==1">
								<view class="rounded-full w-48 h-36 bg-[#329EFF] flex items-center justify-center">
									<ImageBoxVue src="/static/icons/man.png" width="24rpx" height="24rpx"></ImageBoxVue>
								</view>
							</view>
						</view>
						<view class="bg-[#65A3FF] px-12 h-36 flex items-center rounded-full" v-if="val.starsign">
							<text class="text-white">{{val.starsign}}</text>
						</view>
						<view class="" v-if="edit">
							<ImageBoxVue @click="onPath('/pages/user/userinfo')" src="/static/icons/edit.png" class="ml-10"
								width="32rpx" height="33rpx">
							</ImageBoxVue>
						</view>
					</view>
					<picker :range="clList" :value="cl" class="flex items-center" @change="onCl" v-if="edit">
						<view class="flex items-center">
							<text class="text-[#329EFF] mr-10">{{clList[cl]}}</text>
							<ImageBoxVue src="/static/icons/down.png" width="20rpx" height="17rpx"></ImageBoxVue>
						</view>
					</picker>
					<view class="" v-else>
						<ImageBoxVue src="/static/user/heart.png" width="40rpx" height="35rpx"></ImageBoxVue>
						<!-- <ImageBoxVue src="/static/user/red_heart.png" width="40rpx" height="35rpx"></ImageBoxVue> -->
					</view>
				</view>
				<text>{{val.sig||'这家伙什么都没留下'}}</text>
			</view>
		</view>
		<!--  -->
		<view class="flex mt-40 justify-between">
			<view class="">
				<view class="p-12 rounded mr-10" v-for="(e,i) in val.labels" :key="i" :style="{background:colors[i].bg}">
					<text class="" :style="{color:colors[i].text}">{{e}}</text>
				</view>
			</view>
			<!-- <view class="border-[#3B9BDC] border-solid rounded-full py-6 px-20" @click="onPath('/pages/user/aptitude')">
				<text class="text-[#3B9BDC]">TA的资质</text>
			</view> -->
		</view>
		<!--  -->
		<view class="flex bg-[#F3FAFF] mt-20 h-106">
			<view class="flex-1 flex flex-col justify-center items-center" v-for="e,i in cardList" :key="i"
				@click="onPath(e.router)">
				<text class="font-bold text-md">{{val[e.key]}}</text>
				<text class="text-[#7290A6]">{{e.label}}</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		onMounted,
		ref
	} from 'vue'
	import userApi from '@/apis/apiList/userApi';

	const {
		val,
		edit,
	} = defineProps(['val', 'edit'])
	const cl = ref(0)

	const clList = ["所有人可见", "仅关注可见", "仅自己可见"]
	const onCl = (e) => {
		if (cl.val != e.detail.value) {
			cl.value = e.detail.value
			const opt = {
				id: uni.getStorageSync('user').id,
				cl: cl.value
			}
			userApi.memberUpcltype(opt).then(res => {
				userApi.queryMemberInfo({
					id: uni.getStorageSync('user').id
				}).then(resp => {
					uni.setStorageSync('user', resp.data)
				})
			})
		}
	}
	onMounted(() => {
		cl.value = val.cl || 0
	})
	const colors = [{
		bg: "#E3EDFF",
		text: "#4370C1"
	}, {
		bg: "#F2ECFF",
		text: "#634A97"
	}, {
		bg: "#FFE7D6",
		text: "#C3743B"
	}]
	const cardList = [{
		key: "popnum",
		label: "关注",
		router: "/pages/user/attention"
	}, {
		key: "bepopnum",
		label: "粉丝",
		router: "/pages/user/fans"
	}, {
		key: "plnum",
		label: "评论",
		router: ""
	}, {
		key: "possnum",
		label: "帖子",
		router: ""
	}]
	const onPath = (router) => {
		if (router == '/pages/user/userinfo' || router == '/pages/user/attention' || router == '/pages/user/fans') {
			if (edit) {
				uni.navigateTo({
					url: router,
				});
			}
		} else {
			uni.navigateTo({
				url: router,
			});
		}
	}
</script>

<style>
</style>